<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Island Generator by johnhckuo</title>
	<script></script>
	<link rel="stylesheet" href="css/style.css">

	<script src='js/jquery-1.11.3.min.js'></script>
	<script src='js/three.js'></script>
	<script src='js/terrainGeneration.js'></script>
	<script src='js/dat.gui.min.js'></script>
	<script src='js/Detector.js'></script>
	<script src='js/aframe.min.js'></script>
	<script src='js/init.js'></script>

	<script id="vertexShader" type="x-shader/x-vertex">
		varying vec2 uVu;
		void main(){
			uVu = uv;
			gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
		}
	</script>

	<script id="fragmentShader" type="x-shader/x-vertex">
		uniform sampler2D noiseTexture;
		uniform sampler2D baseTexture;

		uniform float baseSpeed;
		uniform float time;
		uniform float noiseScale;
		uniform float alpha;

		varying vec2 uVu;

		void main(){
			vec2 uvShift = uVu + vec2(0.7, -1.5) * baseSpeed * time;
			vec4 noiseGenerator = texture2D(noiseTexture, uvShift);
			vec2 noiseShift = uVu + vec2(noiseGenerator.r, noiseGenerator.b) * noiseScale;
			vec4 baseColor = texture2D(baseTexture, noiseShift);
			baseColor.a = alpha;
			gl_FragColor = baseColor;
		}

	</script>
</head>
<body>
	<a-scene stats cursor-listener shadow="type: pcfsoft">
		<a-assets>
			<img id="sky" src="/vr/img/sky.jpg"  alt="">
			<img id="grass" src="/vr/img/grass.png"  alt="">
		</a-assets>
		<a-entity land class="land" id="land" shadow="cast:true; receive:true;"></a-entity>
		<a-entity tree id="tree" shadow="cast:true; receive:true;"></a-entity>


		<a-entity water id="water"></a-entity>
		<a-sky src="#sky"></a-sky>
		<!-- <a-entity light="type:directional; castShadow:true;" position="1 1 0"></a-entity> -->
		<!-- <a-light type="point" color="white" position="0 100 0"></a-light> -->

		<a-entity directional_light id="light"></a-entity>

		<a-entity id="camera" position="0 100 0" moving>
		  	<a-camera  >
				<a-entity id="cursor" cursor="fuse: true; fuseTimeout: 500"
			            position="0 0 -1"
			            geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.015"
			            material="color: white; shader: flat"
			            nav-pointer>
				</a-entity>
			</a-camera>
		</a-entity>
		<a-entity id="theray" collider-check rotation="0 0 0" position="0 100 0" visible="true">
	            <!-- the aframe inspector barfs on this -->
	            <a-entity  raycaster="
	            objects:.land;
	            direction:0 -1 0;
	            showLine:true;
	            origin:0 -1 0"
	  					></a-entity>
	  	</a-entity>

	</a-scene>
	<script src='js/ui.js'></script>
</body>
</html>
